<script setup lang="ts">
import AIUtil from "@/components/utils/AiUtile/Index.vue"
import {ref, toRefs, onBeforeUnmount, shallowRef, onMounted, watch} from "vue"
import { useRouter, useRoute} from "vue-router";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { CaretUpOutlined , CaretDownOutlined } from '@ant-design/icons-vue';
import type { TreeProps } from 'ant-design-vue';
import {getContentDirTree, type IDirTree} from "@/config";
import {postBlogCreateArticle} from "@/apis/student";
//路由设置
const router=useRouter()
const route=useRoute()
let loading = ref<boolean>(true)
let actionIcon = ref<boolean>(false)

//编辑区域设置
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
let valueHtml = ref('<p></p>')

const mode = 'default'
// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<h1>vue中 Ajax 使用</h1><p>模拟 Ajax 异步设置内容</p>'
    loading.value = false
  }, 1500)
})
//工具栏配置
const toolbarConfig = {}
//编辑器配置
const editorConfig = {
  placeholder: '等待加载...',
  scroll: true
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor:any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
//？目录设置
let dirTree = ref<Array<IDirTree>>([])
//初始化监听，开启立即监听
watch(valueHtml,(n)=>{
  dirTree = getContentDirTree(n);
  console.log(dirTree)
},{
  immediate:true,  //初始化立即监听
})
//图标
const changeActiveIcon = () => {
  actionIcon.value = !actionIcon.value
}
const goBack = () => {
  router.go(-1)
}
// 创建文章

</script>

<template>
  <a-layout class="layout-write" :style="{background: '#fcfcfc'}">
    <a-layout-header class="write-header" >
      <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
          class="write-toolbar"
      />
    </a-layout-header>
    <a-layout-content class="write-editor">
      <a-row :gutter="16" style="height: 100%">
        <a-col :span="6">
            <a-card style="height: 100%">
              内容
            </a-card>
        </a-col>
        <a-col :span="18">
          <Editor
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
              class="editor-style"
          />
        </a-col>
      </a-row>
    </a-layout-content>
    <a-row class="write-posts-footer" :class="{active: actionIcon}">
      <a-col class="show-play" @click="changeActiveIcon">
        <CaretUpOutlined v-if="actionIcon" />
        <CaretDownOutlined v-else/>
      </a-col>
      <a-col>
        <a-flex justify="center" align="center" style="width: 100%;height: 100%">
          <a-button @click="goBack" type="dashed">返回</a-button>
        </a-flex>
      </a-col>
      <a-col :span="6" :offset="16" >
        <a-flex justify="center" align="center" gap="16" style="width: 100%;height: 100%">
          <a-button>预览</a-button>
          <a-button>重置</a-button>
          <a-button type="primary" @click="createArticle()">发布</a-button>
        </a-flex>
      </a-col>
    </a-row>
    <a-i-util></a-i-util>
  </a-layout>
</template>

<style lang="scss" scoped>
.layout-write{
  width: 100%;
  min-height: 100vh;
  padding: 0;
}
.write-header{
  background: transparent;
  padding: 0;
}
.write-toolbar{
  width: 100%;
  justify-content: center;
  border-bottom: 1px solid #ccc
}
.write-posts-footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3.6rem;
  background: #f8fafc;
  border-top: 1px solid #e6ebf5;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, .12), 0 -2px 10px rgba(0, 0, 0, .04);
  transition: all .2s 0s ease-in;
}
.active{
  bottom: -3.6rem;
  transition: all .2s 0s ease-in;
}
.write-editor{
  margin: 0;
  padding: 0 5rem;
  .editor-style{
    background: #7BC0FC;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
  }
}
.show-play{
  position: relative;
  height: 2.1rem;
  width: 3.2rem;
  top: -2.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  &::after{
    content: '';
  }
  &::before{
    content: '';
  }
}

</style>
